<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<f:view>
	<h:form id='stocks_form'>
		<h:head>
			<style type="text/css" title="currentStyle">
				@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable/datatable_table.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable/TableTools.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable/TableTools_JUI.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/theme.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/themes/base/jquery.ui.all.css";
				@import "${facesContext.externalContext.requestContextPath}/views/management/css/stocks.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/global.css";
			</style>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.js"></script>
				
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/datatable/jquery.dataTables.js"></script>
			<script type="text/javascript" charset="utf-8" 
				src="${facesContext.externalContext.requestContextPath}/resources/script/datatable/ZeroClipboard.js"></script>
			<script type="text/javascript" charset="utf-8" 
				src="${facesContext.externalContext.requestContextPath}/resources/script/datatable/TableTools.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.bgiframe-2.1.2.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.core.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.widget.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.mouse.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.button.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.draggable.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.position.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.resizable.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.dialog.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.effects.core.js"></script>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/views/management/scripts/stocks.js"></script>
				
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/views/scripts/global.js"></script>
			
			
			<script type="text/javascript" charset="utf-8">
			//<![CDATA[
				var asInitVals = new Array();
				var oTable;
				var aoColumnsVal='';
				for(var i=0; i < #{stocksBean.columnsSize};i++)
				{
					aoColumnsVal =aoColumnsVal+ 'null,';
				}
				aoColumnsVal += 'null';
				$(document).ready( function () {
					oTable = $('#table').dataTable( {
						"sScrollY": 400,
						"bJQueryUI": true,
						"sPaginationType": "full_numbers",
						"sDom": 'T<"clear">lfrtip',
						"oTableTools": {
							"sSwfPath": "${facesContext.externalContext.requestContextPath}/resources/swf/datatable/copy_csv_xls_pdf.swf",
							"sRowSelect": "multi",
							
							"aButtons": [ "copy", "select_all", "select_none",
							 	             {
								"sExtends": "collection",
								"sButtonText": "Save",
								"aButtons": [ "csv", "xls", "pdf", "print" ]
							 }
							]
						
						},
						#{stocksBean.tableData}
					} );
					
					$("tfoot input").keyup( function () {
				        oTable.fnFilter( this.value, $("tfoot input").index(this) );
				    } );
				    $("tfoot input").each( function (i) {
				        asInitVals[i] = this.value;
				    } );
				     
				    $("tfoot input").focus( function () {
				        if ( this.className == "search_init" )
				        {
				            this.className = "";
				            this.value = "";
				        }
				    } );
				     
				    $("tfoot input").blur( function (i) {
				        if ( this.value == "" )
				        {
				            this.className = "search_init";
				            this.value = asInitVals[$("tfoot input").index(this)];
				        }
				    } );
				    
				    
				    thumbnailDisplay();
				    
				} );
				
				
				
				//]]>
			</script>

		</h:head>
		<body>
			<div>
			
			<ui:include src="../../views/header/header.xhtml" />

			<br />
			<br />
			<br />
			
			
			</div>
			
			<div id="buttons_div">
			<h:commandButton value="Purchase Order" action="#{purchaseOrderBean.loadItemsAction}" onclick="return poBtnOnClick()">
				<f:setPropertyActionListener target="#{purchaseOrderBean.itemCodesString}" value="#{stocksBean.selectedValue}">
				</f:setPropertyActionListener>
				<f:setPropertyActionListener target="#{purchaseOrderBean.storeCodeString}" value="#{stocksBean.selectedStore}">
				</f:setPropertyActionListener>
			</h:commandButton>
			</div>
			<div id="stocks_hidden_div" class="hidden_input">
				<br/>
				<h:inputText id="selected_value" value="#{stocksBean.selectedValue}">
				</h:inputText>
				<h:inputText id="selected_store" value="#{stocksBean.selectedStore}">
				</h:inputText>
				<br/>
			</div>

			<div id="demo">
				<table id="table" class="display">
                	
                    <thead>
						<tr>
							<ui:repeat value="#{stocksBean.columnNames}" var="columnName">
								<th><h:outputText value="#{columnName}"/></th>
							</ui:repeat>
						</tr>
					</thead>
                     <tbody>
                     </tbody>
                     <tr></tr>
                    <tfoot>
                    	<tr>
							<ui:repeat value="#{stocksBean.columnNames}" var="columnName">
								<th><input type="text"  value="Search #{columnName}" class="search_init" /></th>
							</ui:repeat>
						</tr>
					
					</tfoot>
					
				</table>
			
			</div>
			
			
			<ui:include src="../../views/footer/footer.xhtml" />
		</body>


	</h:form>
</f:view>
</html>
